/**
 * 抢票中
 * @email 626097912@qq.com
 * Created by dength on 2017/04/14
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Alert
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';

class GtHalfway extends BaseComponent {
    constructor(props) {
        super(props);
    }

    getNavigationBarProps() {
        return {
            title: '抢票中',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    renderBody() {
        return (
            <View style={styles.container}>
                <View style={styles.prompts}>
                    <View style={styles.prompts_box}>
                        <Text style={styles.prompts_box_tx}>
                            已经为您抢票
                            <Text style={{ color: '#FF9F2A' }}>1次</Text>
                            ,请注意查收手机短信通知!
                        </Text>
                    </View>
                </View>
                <View style={styles.infos}>
                    <Image source={require('../images/ic_gtHalfway_t.png')} style={styles.infos_t_img}>
                        <View style={{ margin: 10 }}>
                            <View style={[styles.box_top, { height: 20 }]}>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_top_tx}>2017年4月11日</Text>
                                </View>
                                <View style={styles.box_center_li}></View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_top_tx}>星期二</Text>
                                </View>
                            </View>

                            <View style={styles.box_center}>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_center_tx}>长沙南</Text>
                                </View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_center_tx}>G6025</Text>
                                    <View style={styles.img_position}>
                                        <Image style={{ width: 50, height: 4 }} source={require('../images/ic_sdSuccess_xian.png')} />
                                    </View>
                                </View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_center_tx}>深圳北</Text>
                                </View>
                            </View>

                            <View style={styles.box_tottom}>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_tottom_tx}>18:16</Text>
                                </View>
                                <View style={styles.box_center_li}></View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_tottom_tx}>21:36</Text>
                                </View>
                            </View>

                            <View style={{ marginTop: 26 }}>

                                <View style={[styles.box_top, { height: 35 }]}>
                                    <Text style={styles.box_xia_tx}>已选车次</Text>
                                    <Text style={styles.box_xia_tx}>G6025</Text>
                                </View>

                                <View style={[styles.box_top, { height: 35 }]}>
                                    <Text style={styles.box_xia_tx}>已选座席</Text>
                                    <Text style={styles.box_xia_tx}>一等座</Text>
                                </View>
                            </View>

                        </View>
                    </Image>
                    <Image style={styles.infos_c_img} source={require('../images/ic_gtHalfway_c.png')} />
                    <View style={[styles.center_box, { height: 52 }]}>
                        <View style={{ margin: 10, }}>
                            <View style={[styles.box_top, { height: 16 }]}>
                                <Text style={styles.box_xia_tx}>乘客姓名</Text>
                                <Text style={styles.box_xia_tx}>成人票</Text>
                            </View>
                            <View style={[styles.box_top, { height: 16 }]}>
                                <Text style={styles.box_xia_tx}>430123****5678</Text>
                            </View>
                        </View>
                    </View>
                    <Image style={styles.infos_c_img} source={require('../images/ic_gtHalfway_c.png')} />
                    <View style={[styles.center_box, { height: 100, borderBottomRightRadius: 5, borderBottomLeftRadius: 5 }]}>
                        <View style={{ margin: 10 }}>
                            <View style={[styles.box_top, { height: 30 }]}>
                                <Text style={styles.box_xia_tx}>监控方式</Text>
                                <Text style={styles.box_xia_tx}>有票自动下单</Text>
                            </View>
                            <View style={[styles.box_top, { height: 30 }]}>
                                <Text style={styles.box_xia_tx}>手机号码</Text>
                                <Text style={styles.box_xia_tx}>18627***6503</Text>
                            </View>
                            <View style={[styles.box_top, { height: 30 }]}>
                                <Text style={styles.box_xia_tx}>提醒方式</Text>
                                <Text style={styles.box_xia_tx}>短信提醒</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={() => {
                                Alert.alert(
                                    "停止抢票",
                                    "您确定停止抢票吗？",
                                    [
                                        { text: "取消", onPress: () => { } },
                                        { text: "确定", onPress: () => { } },
                                    ]
                                );
                            } }
                    style={styles.startGrab}>
                    <View style={styles.startGrab_bottom}>
                        <Text style={styles.startGrab_bottom_ft}>停止抢票</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    prompts: {
        width: Constants.window.width, height: 40, backgroundColor: CommonStyles.colors.promptBG,
    },
    prompts_box: {
        justifyContent: 'center', alignItems: 'center', height: 40,
    },
    prompts_box_tx: {
        fontSize: 10, color: '#60605E'
    },
    //中间
    infos: {
        margin: 15, marginBottom: 0, width: Constants.window.width - 30
    },
    infos_t_img: {
        width: Constants.window.width - 30, height: 190,
    },

    box_top: {
        flexDirection: 'row', justifyContent: 'space-between',
    },
    box_top_tx: {
        fontSize: 12, color: '#E9EEF3'
    },
    box_center: {
        marginTop: 15, flexDirection: 'row', height: 25,
    },
    box_center_li: {
        width: (Constants.window.width - 50) / 3, alignItems: 'center',
    },
    box_center_tx: {
        color: CommonStyles.colors.white, fontSize: 18, fontWeight: 'bold'
    },
    box_tottom_tx: {
        color: CommonStyles.colors.white, fontSize: 12,
    },
    box_tottom: {
        flexDirection: 'row', height: 20, marginTop: 10,
    },
    img_position: {
        position: 'absolute', bottom: -3, right: ((Constants.window.width - 50) / 3 - 50) / 2
    },
    box_xia_tx: {
        fontSize: 14, color: '#565656'
    },
    //分栏图
    infos_c_img: {
        width: Constants.window.width - 30, height: 15
    },
    //停止抢票
    startGrab: {
        position: 'absolute', bottom: 0, width: Constants.window.width
    },
    startGrab_bottom: {
        backgroundColor: '#FF8B00', height: 48.5, justifyContent: 'center', alignItems: 'center'
    },
    startGrab_bottom_ft: {
        color: 'white', fontSize: 12
    },
    //乘客信息
    center_box: {
        width: Constants.window.width - 30, backgroundColor: 'white'
    }
});

export default GtHalfway;